<template>
  <label>
    <el-submenu v-if="menu.childTreeDto && menu.childTreeDto.length >= 1" :index="'' + menu.path" >
      <template slot="title">
        <i :class="[menu.icon,'asideIcon']"></i>
        <span slot="title">{{menu.name}}</span>
      </template>
      <menutree v-for="item in menu.childTreeDto" :key="item.id" :menu="item"></menutree>
    </el-submenu> 
    <el-menu-item v-else :index="'' + menu.path"  @click="open(menu.path)" @blur="blur()" :popper-append-to-body="false">
      <i :class="[menu.icon,'asideIcon']"></i>
      <span slot="title">{{menu.name}}</span>
    </el-menu-item>
  </label>
</template>
<script>
import menutree from "./menutree.vue";
export default {
  name: "menutree",
  data() {
    return {};
  },
  components: {
    menutree: menutree
  },
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  methods: {
    open: function(path) {
      this.$router.push(path);
    }
  }
};
</script>
<style >
/* 如果没有此样式的话  折叠有子级菜单的父菜单文字是不会隐藏的 */
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu .el-submenu__title span,
.el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
/* .el-menu-item.is-active {
    color: rgba(255, 255, 255, 0);
} */
</style>